﻿<div class="flex-grid">
    <h1 class="text-light no-margin-top">{{_zuTableName}}</h1>
    <hr class="thin" />
    <div class="row cell-auto-size no-margin-bottom">
        <div class="cell">
            <button class="button primary" ng-click="tableAddButtonClickEvent()"><span class="mif-plus"></span> 新增</button>
            <button class="button primary" ng-click="tableDeleteButtonClickEvent()"><span class="mif-bin"></span> 删除</button>
            <button class="button primary" ng-click="tableRefreshButtonClickEvent()"><span class="mif-loop2"></span> 刷新</button>
        </div>
    </div>
    <hr class="thin" />
    <div class="row cell-auto-size no-margin-bottom">
        <div class="cell" align="left">
            <label>每页</label>
            <div class="input-control select _zm-miniInputWidth_x2">
                <select ng-model="nowCount" ng-change="nowCountSelectEvent()">
                    <option ng-selected="true">10</option>
                    <option>20</option>
                    <option>30</option>
                </select>
            </div>
            <label>条</label>
        </div>
    </div>
    <div class="row cell-auto-size no-margin-bottom">
        <table class="table hovered cell-hovered border bordered block-shadow-impact noMarginBottom noMarginTop myTable">
            <thead>
                <tr>
                    <th style="width:3%;">
                        <input type="checkbox" ng-model="isSelectAllChecked" ng-click="selectAllCheckBoxEvent()">
                    </th>
                    <th style="width:5%;">序号</th>
                    <th ng-show="freeColumn.show" style="{{freeColumn.style}}">{{freeColumn.name}}</th>
                    <th ng-show="showRowOperationButton" style="width:7%;">操作</th>
                    <th ng-repeat="head in tableHead" class="sortable-column {{head.sortWay}}" data-column-name-id="{{head['column-name']}}" ng-click="sortHeadClickEvent(head)">{{head.name}}</th>
                </tr>
            </thead>
            <tbody>
                <!--带排序的写法-->
                <!-- <tr ng-repeat="td in tableData | orderBy:sortHeadObject.predicate:sortHeadObject.reverse"> -->
                <!--不带排序的写法-->
                <tr ng-repeat="td in tableData" data-rowid="rowid{{td.rowId}}" class="{{nowSelectItem==td.rowId?'currentSelectItem':''}}" ng-click="rowClickEvent(td)" ng-model="td">
                    <td>
                        <input type="checkbox" ng-model="td.checked">
                    </td>
                    <td>{{$index+1}}</td>
                    <td ng-show="freeColumn.show" compile="freeColumn.content"></td>
                    <td ng-show="showRowOperationButton">
                        <span title="编辑" class="mif-pencil myCursor" ng-click="operationUpdateClickEvent(td)"></span>
                        <span title="删除" class="mif-bin myCursor" ng-click="operationDeleteClickEvent(td)"></span>
                    </td>
                    <td ng-repeat="head in tableHead" class="{{(head.dataType.name=='int' || head.dataType.name=='decimal')?'rightAlignText':''}}" ng-click="tableItemClick($event,td)">{{td[head['column-name']]}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="row cell-auto-size no-margin-bottom">
        <div class="cell" align="left">
            <div class="pagination noMarginTop">
                <span class="item" ng-click="pageButtonClickEvent('first')">&laquo;</span>
                <span class="item" ng-click="pageButtonClickEvent('previou')">&lt;</span>
                <span class="item {{item.isCurrent}}" ng-repeat="item in pageButtonArray" ng-click="pageButtonClickEvent(item)">
                        {{item.number}}
                    </span>
                <span class="item" ng-click="pageButtonClickEvent('next')">&gt;</span>
                <span class="item" ng-click="pageButtonClickEvent('last')">&raquo;</span>
            </div>
        </div>
        <div class="cell _zm-inputHeight" align="right">
            <span>第</span>
            <div class="input-control text _zm-miniInputWidth_x2" data-role="hint" data-hint-background="bg-black" data-hint-color="fg-white" data-hint-mode="3" data-hint="失焦生效" data-hint-position="bottom">
                <input type="number" ng-model="inputPage" min="1" max="maxPageNumber" ng-blur="toPointPage()" ng-keypress="gotoPageByKeyPress($event)"/>
            </div>
            <span>页</span>
            <span>，共</span>
            <span>{{maxPageNumber}}</span>
            <span>页</span>
        </div>
    </div>
</div>
<!--编辑窗口-->
<div data-role="dialog" id="_zmEditorWindow{{objId}}" class="padding20" data-close-button="true" data-overlay="true" data-overlay-color="op-dark" data-overlay-click-close="true" data-width="500px">
    <div class="grid">
        <div class="row dragHead">
            <h3 class="text-light">编辑</h3>
        </div>
        <hr class="thin" />
        <div class="row">
            <form id="_zmEditForm{{objId}}" name="editform" class="full-size">
                <!--数字和字符串-->
                <br ng-repeat-start="obj in headData" ng-if="formData[obj['column-name']].type!='select'" />
                <div ng-if="formData[obj['column-name']].type=='number' || formData[obj['column-name']].type=='text'" class="input-control text full-size" data-role="input">
                    <label>{{obj.name}}
                        <span class="formError" ng-show="editform[obj['column-name']].$error.pattern">&nbsp;|&nbsp;{{formData[obj['column-name']].errorMsg}}</span>
                        <span class="formError" ng-show="editform[obj['column-name']].$error.required">&nbsp;|&nbsp;不能为空</span>
                    </label>
                    <input type="{{formData[obj['column-name']].type}}" name="{{obj['column-name']}}" ng-model="formData[obj['column-name']].value" ng-pattern="formData[obj['column-name']].pattern" required="{{formData[obj['column-name']].required?'required':''}}">
                </div>
                <!--日期-->
                <div ng-if="formData[obj['column-name']].type=='date'" class="input-control text full-size" data-role="datepicker" data-scheme="darcula" data-format="{{formData[obj['column-name']].format}}">
                    <label>{{obj.name}}
                        <span class="formError" ng-show="editform[obj['column-name']].$error.pattern">&nbsp;|&nbsp;{{formData[obj['column-name']].errorMsg}}</span>
                        <span class="formError" ng-show="editform[obj['column-name']].$error.required">&nbsp;|&nbsp;不能为空</span>
                    </label>
                    <input type="text" name="{{obj['column-name']}}" ng-value="formData[obj['column-name']].value" />
                    <button class="button"><span class="mif-calendar"></span></button>
                </div>
                <!--下拉框-->
                <div ng-if="formData[obj['column-name']].type=='select'" class="input-control full-size" data-role="select">
                    <label>{{obj.name}}
                        <span class="formError" ng-show="editform[obj['column-name']].$error.pattern">&nbsp;|&nbsp;{{formData[obj['column-name']].errorMsg}}</span>
                        <span class="formError" ng-show="editform[obj['column-name']].$error.required">&nbsp;|&nbsp;不能为空</span>
                    </label>
                    <select name="{{obj['column-name']}}" ng-value="formData[obj['column-name']].value">
                        <option ng-repeat="i in formData[obj['column-name']].extraData" value="{{i.value}}">{{i.content}}</option>
                    </select>
                </div>
                <br ng-repeat-end/>
            </form>
        </div>
        <hr class="thin" />
        <div class="row">
            <div class="form-actions">
                <button ng-show="editform.$invalid" class="button" disabled>login</button>
                <button ng-show="editform.$valid" class="button primary" ng-click="saveZmEditorFormValue()">保存</button>
                <button type="button" class="button" ng-click="zmEditorFormClose()">关闭</button>
            </div>
        </div>
    </div>
</div>
<!--新增窗口-->
<div data-role="dialog" id="_zmAddWindow{{objId}}" class="padding20" data-close-button="true" data-overlay="true" data-overlay-color="op-dark" data-overlay-click-close="true" data-width="500px">
    <div class="grid">
        <div class="row">
            <h3 class="text-light">编辑</h3>
        </div>
        <hr class="thin" />
        <div class="row">
            <form id="_zmAddForm{{objId}}" name="addform" class="full-size">
                <!--数字和字符串-->
                <br ng-repeat-start="obj in headData" ng-if="formData[obj['column-name']].type!='select'" />
                <div ng-if="formData[obj['column-name']].type=='number' || formData[obj['column-name']].type=='text'" class="input-control text full-size" data-role="input">
                    <label>{{obj.name}}
                        <span class="formError" ng-show="addform[obj['column-name']].$error.pattern">&nbsp;|&nbsp;{{formData[obj['column-name']].errorMsg}}</span>
                        <span class="formError" ng-show="addform[obj['column-name']].$error.required">&nbsp;|&nbsp;不能为空</span>
                    </label>
                    <input type="{{formData[obj['column-name']].type}}" name="{{obj['column-name']}}" ng-model="formData[obj['column-name']].value" ng-pattern="formData[obj['column-name']].pattern" required="{{formData[obj['column-name']].required?'required':''}}">
                </div>
                <!--日期-->
                <div ng-if="formData[obj['column-name']].type=='date'" class="input-control text full-size" data-role="datepicker" data-scheme="darcula" data-format="{{formData[obj['column-name']].format}}">
                    <label>{{obj.name}}
                        <span class="formError" ng-show="addform[obj['column-name']].$error.pattern">&nbsp;|&nbsp;{{formData[obj['column-name']].errorMsg}}</span>
                        <span class="formError" ng-show="addform[obj['column-name']].$error.required">&nbsp;|&nbsp;不能为空</span>
                    </label>
                    <input type="text" name="{{obj['column-name']}}" ng-value="formData[obj['column-name']].value" />
                    <button class="button"><span class="mif-calendar"></span></button>
                </div>
                <!--下拉框-->
                <div ng-if="formData[obj['column-name']].type=='select'" class="input-control full-size" data-role="select">
                    <label>{{obj.name}}
                        <span class="formError" ng-show="addform[obj['column-name']].$error.pattern">&nbsp;|&nbsp;{{formData[obj['column-name']].errorMsg}}</span>
                        <span class="formError" ng-show="addform[obj['column-name']].$error.required">&nbsp;|&nbsp;不能为空</span>
                    </label>
                    <select name="{{obj['column-name']}}" ng-value="formData[obj['column-name']].value">
                        <option ng-repeat="i in formData[obj['column-name']].extraData" value="{{i.value}}">{{i.content}}</option>
                    </select>
                </div>
                <br ng-repeat-end/>
            </form>
        </div>
        <hr class="thin" />
        <div class="row">
            <div class="form-actions">
                <button ng-show="addform.$invalid" class="button" disabled>login</button>
                <button ng-show="addform.$valid" class="button primary" ng-click="saveZmAddFormValue()">保存</button>
                <button type="button" class="button" ng-click="zmAddFormClose()">关闭</button>
            </div>
        </div>
    </div>
</div>
